<template lang="pug">
//- (v-show="info")
.works-lunbo-pc
  Loading(v-if='isLoadingShow && getLoadImage && isShowLoading' @closeLoading='closeLoading')

  .works-top
    .works-top-text {{info.name}}
    .works-top-icon
      i.iconfont(:class="showlun?'icon-scene':'icon-scene_close'" @click="showPic")
      i.iconfont.icon-fasongtuwen(@click="showText")
    
  .works-dec(v-show="showtext")
    p.dec-nei {{info.description}}
    //- p(v-for="(dec, ix) in desc" :key="ix" style="font-size:14px;color:#000;margin-bottom:15px;text-indent:28px;line-height: 28px;letter-spacing: 2px;") {{dec}}
  .works-list(v-show="showlist")
    .works-list-item(v-for="(item, index) in list" :key="index" @click.stop="jump(item)")
      img(:src="item.full_icon_src")
  #persons(v-show="showlun")
    .swiper-container
      .swiper-wrapper
        .swiper-slide(v-for="(item, index) in list" :key="index" @click.stop="jump(item)")
          .text
            img(:src="item.full_icon_src")

  //- 扫一扫
  
  .works-scan-qrcode(v-if="scan")
    .works-scan-text
      span 扫一扫
      van-icon(name="scan" size="18" style="vertical-align: sub;margin-left: 7px;")
    .works-scan-img
      img(:src="scan" style="width: 100%;")
  
  .works-bottom(v-if="logo")
    img(:src="logo")
  
</template>

<script>
import { sortId } from '@/utils'
import goodsAndWorks from '@/mixins/goodsAndWorks'

export default {
  mixins: [goodsAndWorks],
  data() {
    return {
      showlun: true,
      showlist: false,
      showtext: false,
      list: [],
      info: {},
      isLoadingShow: false,
      scan: '',
      logo: '',
      desc: [],
    }
  },
  methods: {
    showPic() {
      if (this.showtext) this.showtext = false
      if (this.showlun) {
        this.showlun = false
        this.showlist = true
      } else {
        this.showlist = false
        this.showlun = true
      }
    },
    showText() {
      if (!this.showtext) {
        this.showlun = false
        this.showlist = false
      } else {
        this.showlun = true
        this.showlist = false
      }
      this.showtext = !this.showtext
    },
    // 跳转
    jump(item) {
      window.open(item.preview, '_self')
    },
    // 初始化轮播
    initRotation() {
      this.$nextTick(() => {
        var personsSwiper = new Swiper('#persons .swiper-container', {
          watchSlidesProgress: true,
          slidesPerView: 'auto',
          centeredSlides: true,
          loop: false,
          loopedSlides: 5,
          autoplay: false,
          // navigation: {
          //   nextEl: '.swiper-button-next',
          //   prevEl: '.swiper-button-prev',
          // },
          // pagination: {
          //   el: '.swiper-pagination',
          // },
          on: {
            progress: function (progress) {
              for (var i = 0; i < this.slides.length; i++) {
                var slide = this.slides.eq(i);
                var slideProgress = this.slides[i].progress;
                var modify = 1;
                if (Math.abs(slideProgress) > 1) {
                  modify = (Math.abs(slideProgress) - 1) * 0.05 + 1;
                }
                var translate, scale
                if (slideProgress > 0) {
                  translate = slideProgress * modify * 250 + 'px';
                  scale = 1 - Math.abs(slideProgress) / 18;
                } else {
                  translate = -slideProgress * 40 + 'px';
                  scale = 1
                }
                // zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
                slide.transform('translateX(' + translate + ') scale(' + scale + ')');
                slide.css('zIndex', -slideProgress);
                slide.css('opacity', 1);
                if (Math.abs(slideProgress) > 2) {
                  slide.css('opacity', 0);
                }
              }
            },
            setTransition: function (transition) {
              for (var i = 0; i < this.slides.length; i++) {
                var slide = this.slides.eq(i)
                slide.transition(transition);
              }

            }
          }
        })
      })
    }
  },
  mounted() {
    if (this.$route.params.id) {
      this.$API('getWorksData', [this.$route.params.id]).then(res => {
        console.log(res)
        if (res.code == 200) {

          let infoLoad = null
          if (res.data.load_type == 1) {
            infoLoad = {
              fk_userpano_load_id: res.data.fk_userpano_load_id,
              load_type: res.data.load_type,
            }
          } else {
            if (res.data.load) {
              res.data.load.pc_load_img = res.data.load.full_pc_load_img
              res.data.load.load_img = res.data.load.full_load_img
              res.data.loadinfo = res.data.load
              infoLoad = res.data.loadinfo
              infoLoad.load_type = res.data.load_type
              infoLoad.fk_userpano_load_id = res.data.fk_userpano_load_id
            }
          }
          this.$store.dispatch('fetchOverviewLoadInfo', infoLoad)
          this.isLoadingShow = res.data.is_loading

          this.info = res.data
          // 处理简介
          // if (res.data.description) {
            // console.log(res.data.description.indexOf('↵'))
            // let desc = res.data.description.split('    ')
            // this.desc = desc.filter(Boolean)
            // console.log(this.desc)
          // }
          if (res.data.full_pc_background_image_url) {
            document.getElementsByTagName("body")[0].style.background = `url(${res.data.full_pc_background_image_url}) left top / 100% 100% no-repeat`
          }
          if (res.data.full_logo) {
            this.logo = res.data.full_logo
          }
          if (res.data.full_thumb_wxcodeurl) {
            this.scan = res.data.full_thumb_wxcodeurl
          }
          if (res.data.pano_portfolio_list && res.data.pano_portfolio_list.length > 0) {
            res.data.pano_portfolio_list.sort(sortId)
            this.list = res.data.pano_portfolio_list
            this.initRotation()
          }
          
          setTimeout(() => {
            this.getWXShareData(res.data)
          }, 5000)
        }
      })
    }
    
  }
}
</script>

<style lang="stylus">
.works-lunbo-pc
  .works-top
    width 500px
    height 12vh
    line-height 10vh
    margin 0 auto
    display flex
    justify-content space-between
    .works-top-text
      font-size 18px
      font-weight 600
      color #555
      letter-spacing 3px
    .works-top-icon
      > i
        font-size 20px
        color #555
        font-weight 500
        cursor pointer
      > .icon-fasongtuwen
        margin-left 20px
  .works-dec
    width 500px
    margin 0 auto
    height 87vh
    overflow-y auto
    color #000
    font-size 14px
    p.dec-nei
      font-size 14px
      color #000
      line-height 28px
      letter-spacing 2px
      white-space break-spaces
  .works-list
    width 500px
    height 87vh
    overflow-y auto
    margin 0 auto
    display flex
    flex-wrap wrap
    justify-content space-between
    .works-list-item
      width 48.5%
      height 280px
      box-sizing: border-box
      margin-bottom 15px
      cursor pointer
      img
        width 100%
        height 280px
  #persons
    position relative
    width 500px
    height 70vh
    margin 0 auto;
    overflow hidden
    .swiper-container
      line-height: 100vh
      margin-left: 0px
      .swiper-slide
        width: 300px
        height: 60vh
        max-height: 560px
        cursor pointer
        .text
          width: 100%
          height: 100%
          clear: both
          overflow: hidden
          img
            width: 100%
            height: 100%

        h2
          float: left
          padding-top: 0
          text-align: center
          font-size: 20px
          margin-bottom: 10px
          border: 2px solid #9c0
        h4
          float: left
          margin: 0
          width: 60%
          font-size: 16px

    .swiper-pagination
      width 100%
      bottom 20px
      .swiper-pagination-bullets .swiper-pagination-bullet
        margin 0 5px
        border 3px solid #fff
        background-color #d5d5d5
        width 10px
        height 10px
        opacity 1
      .swiper-pagination-bullets .swiper-pagination-bullet-active
        border 3px solid #00aadc
        background-color #fff

    .swiper-button-prev
      left: -30px
      top: 40%
      width: 45px
      height: 45px
    .swiper-button-prev:hover
      background-position: 0 -46px
      background-size: 100%
    .swiper-button-next
      right: -30px
      top: 40%
      width: 45px
      height: 45px
  .works-scan-qrcode
    text-align right
    margin-top 20px
    padding-right 50px
    position relative
    // &:hover
    //   >.works-scan-img
    //     display block
    span
      font-size 16px
    .works-scan-img
      display none
      position absolute
      bottom 40px
      width 10%
      right 50px
      z-index 2
    .works-scan-text
      display inline-block
      padding 5px 17px
      border 1px solid #999
      cursor pointer
      color #333
      border-radius 20px
      &:hover
        ~.works-scan-img
          display block

  .works-bottom
    margin-top 10px
    img
      height 55px
</style>
